<template>
  <div class="service">
    <div class="service-serarch">
      <el-form v-bind="getFormProps()" label-width="90px" >
        <el-form-item label="服务名称：" class="service-name">
          <el-input v-model="query.goodsName" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item label="价格：" class="price-box" v-if="query.status!=2">
          <!-- <x-input-float :step="0.01" :debounce="500" v-model="minPrice"></x-input-float> -->
          <x-input-money  v-model="minPrice" />
          <!-- <el-input-number :step="0.01" :debounce="500" v-model="minPrice"></el-input-number> -->
          <span>~</span>
          <x-input-money  :min="Number(query.minPrice)"  v-model="maxPrice" />
          <!-- <x-input-float :step="0.01" :min="query.minPrice/100" :debounce="500" v-model="maxPrice"></x-input-float> -->
          <!-- <el-input-number :step="0.01" :min="query.minPrice/100" :debounce="500" v-model="maxPrice"></el-input-number> -->
        </el-form-item>
        <el-form-item :label="timeLabel + '：'"  label-width="110px" class="service-name service-time">
          <el-date-picker
            v-model="publishTime"
            type="date"
            placeholder="选择日期"
            :picker-options="publishTimeOption">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
      </el-form>
    </div>
    <div class="handle-button">
      <div class="service-button-box" v-if="query.status !== 3">
        <el-button type="link" size="small" @click="handleDelete(multipleSelectionId,$event)" 
        :disabled="!btnActice" v-if="[1,4,2].indexOf(query.status)>-1" >删除</el-button>
        <el-button type="link" size="small" @click="handleOut(multipleSelectionId,$event)" 
        :disabled="!btnActice"  v-if="[0].indexOf(query.status)>-1">下架</el-button>
        <el-button type="link" size="small" @click="handlePut(multipleSelectionId,$event)" 
        :disabled="!btnActice"  v-if="[1].indexOf(query.status)>-1">上架</el-button>
      </div>
    </div>
    <el-table ref="multipleTable" :data="service_list.list" class="service-table" stripe fit @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45"  v-if="query.status!=3"></el-table-column>
      <el-table-column class-name="pic-content" label="服务图片" width="100">
        <template scope="scope">
          <div class="service-img-box">
            <x-img class="team-logo" :src="scope.row.imgs"  width="100%" />
            <!-- <img :src='scope.row.imgList[0] && scope.row.imgList[0].goodsThumbUrl ||""' width="100%"> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column class-name="name-content" label="服务名称">
        <template scope="scope">
          <div class="small">{{scope.row.goodsName}}</div>
        </template>
      </el-table-column>

       <el-table-column  label="服务分类" align="center">
        <template scope="scope">
          <div class="small">{{scope.row.goodsCateName}}</div>
        </template>
      </el-table-column>

      <el-table-column class-name="price-content" label="价格" width="150"  v-if="query.status !== 2">
        <template scope="scope">
          <div class="small">{{Number(scope.row.goodsLowestPrice) | formatMoney}}~{{Number(scope.row.goodsHighestPrice) | formatMoney}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="timeLabel"  class-name="handle-time" width="120">
        <template scope="scope">
          <div class="small weak tc" v-if="query.status===2 || query.status===1">{{Number(scope.row.updateTime) | FormatDate('yyyy-MM-dd HH:mm')}}</div>
          <div class="small weak tc" v-else>{{Number(scope.row.publishTime) | FormatDate('yyyy-MM-dd HH:mm')}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="handle" class-name="handle-button" label="操作" width="150" align="center">
        <template scope="scope">
          <router-link  :to="{ name: 'detail', params: { serviceId: scope.row.goodsCode }}" class="check-btn small goods-check link"  target="_blank">查看</router-link>
          <router-link  
          v-if="([1,4,2].indexOf(query.status)>-1) && (scope.row.cateType === 1)" 
          :to="{ name: 'goodsEdit', params: {editType: edit, goodsCode: scope.row.goodsCode, goodsCateCode: scope.row.goodsCateCode, releaseType: 'activity'}}" 
          class="check-btn small goods-check link"  
          target="_blank">
          编辑
          </router-link>
          <router-link  
          v-if="([1,4,2].indexOf(query.status)>-1) && (scope.row.cateType === 2)" 
          :to="{ name: 'goodsEdit', params: {editType: edit, goodsCode: scope.row.goodsCode, goodsCateCode: scope.row.goodsCateCode, releaseType: 'product'}}" 
          class="check-btn small goods-check link"  
          target="_blank">
          编辑
          </router-link>
          
          <!-- <el-button type="text" size="small" v-if="[4,2].indexOf(query.status)>-1">编辑</el-button> -->
          <span @click="handleDelete(scope.row.goodsCode,$event)" class="check-btn small goods-check link" v-if="[1,4,2].indexOf(query.status)>-1">删除</span>
          <span @click="handleOut(scope.row.goodsCode,$event)" class="check-btn small goods-check link" v-if="[0].indexOf(query.status)>-1">下架</span>
          <span @click="handlePut(scope.row.goodsCode,$event)" class="check-btn small goods-check link" v-if="[1].indexOf(query.status)>-1">上架</span>
          <!-- <el-button type="link" size="small" v-if="[4].indexOf(query.status)>-1">
            <router-link :to="{ name: 'activity', params: { type: 'republish', goodsCode: scope.row.goodsCode, goodsCateCode: scope.row.goodsCateCode}}" class="check-btn"  target="_blank">重新发布</router-link>
          </el-button> -->
        </template>
      </el-table-column>
    </el-table> 
    <el-pagination
        v-bind="getPaginationProps(service_list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import goodsApi from 'api/service'
import { pagingList } from 'utils/mixins'
import XInputFloat from 'src/components/XInputFloat'
export default {
  mixins: [pagingList],
  components: {
    goodsApi,
    XInputFloat
  },
  computed: {
    ...mapGetters({
      service_list: 'service_list'
    }),
    minPrice: {
      set (value) {
        this.query.minPrice = value
        this.maxPrice = this.query.minPrice > this.query.maxPrice ? this.query.minPrice : this.query.maxPrice
      },
      get () {
        return this.query.minPrice
      }
    },
    maxPrice: {
      set (value) {
        this.query.maxPrice = Number(value)
      },
      get () {
        return this.query.maxPrice
      }
    },
    publishTime: {
      set (value) {
        this.query.publishTime = new Date(value).getTime() || null
        this.publishTimeMid = this.query.publishTime
      },
      get () {
        return this.publishTimeMid
      }
    }
  },
  watch: {
    query (value) {
      let publishTime = value.publishTime ? new Date(Number(value.publishTime)) : ''
      this.publishTimeMid = publishTime
    }
  },
  data () {
    return {
      query: this.getQuery({publishTime: parseInt(this.$route.query.publishTime) || null, minPrice: this.$route.query.minPrice > 0 ? this.$route.query.minPrice : 0, maxPrice: this.$route.query.maxPrice > 0 ? this.$route.query.maxPrice : 1000000}),
      publishTimeMid: '',
      multipleSelectionId: [],
      btnActice: false,
      timeLabel: '发布时间',
      edit: 'edit',
      publishTimeOption: {
        disabledDate (time) {
          return (time.getTime() - 24 * 60 * 60 * 1000) > Date.now() - 8.64e7
        }
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelectionId = []
      val.length > 0 ? this.btnActice = true : this.btnActice = false
      val.map(item => this.multipleSelectionId.push(item.goodsCode))
      this.multipleSelectionId = this.multipleSelectionId.join(',')
    },
    handleDelete (goodsCode, event) {
      let loading
      this.$confirm('此操作将永久删除该服务商品，是否继续？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        loading = this.$loading({ fullscreen: true, text: '努力删除中' })
        goodsApi.goodsDelete({
          goodsCode: goodsCode
        }, {context: event.target}).then(res => {
          setTimeout(() => {
            loading.close()
            if (res.result === '0') {
              this.$message('删除成功')
            } else if (res.result === '20039') {
              this.$message.error(res.data + '个商品删除失败')
            }
            this.fetch()
          }, 5000)
        }, () => {
          loading.close()
          // this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    },
    handleOut (goodsCode, event) {
      let loading
      this.$confirm('此操作将下架该服务商品，是否继续？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行下架接口
        loading = this.$loading({ fullscreen: true, text: '努力下架中' })
        goodsApi.goodsOut({
          goodsCode: goodsCode
        }, {context: event.target}).then(res => {
          setTimeout(() => {
            loading.close()
            if (res.result === '0') {
              this.$message('下架成功')
            } else if (res.result === '20037') {
              this.$message.error(res.data + '个商品下架失败')
            }
            this.fetch()
          }, 5000)
        }, () => {
          loading.close()
          // this.$message.error('下架失败')
        })
      }).catch(() => {
      })
    },
    handlePut (goodsCode, event) {
      let loading
      this.$confirm('此操作将上架该服务商品，是否继续？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行上架接口
        loading = this.$loading({ fullscreen: true, text: '努力上架中' })
        goodsApi.goodsPut({
          goodsCode: goodsCode
        }, {context: event.target}).then(res => {
          setTimeout(() => {
            loading.close()
            if (res.result === '0') {
              this.$message('上架成功')
            } else if (res.result === '20038') {
              this.$message.error(res.data + '个商品上架失败')
            }
            this.fetch()
          }, 5000)
        }, () => {
          loading.close()
          // this.$message.error('上架失败')
        })
      }).catch(() => {
      })
    },
    typeList () {
      let draftsPath = this.$route.path.split('/')
      let uriName = this.$route.params.type || draftsPath[draftsPath.length - 1]
      if (uriName === 'underway') {
        this.query.status = 0
      } else if (uriName === 'store') {
        this.query.status = 1
        this.timeLabel = '结束时间'
      } else if (uriName === 'check') {
        this.query.status = 3
      } else if (uriName === 'fail') {
        this.query.status = 4
      } else if (uriName === 'drafts') {
        this.query.status = 2
        this.timeLabel = '最后编辑时间'
        this.query.minPrice = this.query.maxPrice = null
        this.edit = 'drafts'
      } else {
        window.location.href = '/'
      }
    },
    fetch () { // 初始化获取数据， 分页，和搜索表单发生提交时被调用，如果想触发表单提交则调用this.submit()
      this.$store.dispatch('service_list', this.query)
    }
  },
  updated () {
    this.typeList()
  }
}

</script>
<style lang="scss">
@import '~styles/var.scss';
.service-serarch{
  margin-bottom: 0;
  overflow: hidden;
  .service-name{
    width: 240px;
    float: left;
    .el-input{
      width: 100%;
    }
  }
  .service-time{
    padding-left:10px;
    width: 245px;
  }
  .price-box{
    width: 270px;
    float: left;
    font-size: 0;
    .el-input-number{
      width: 75px;
      display: inline-block;
      font-size: 14px;
    }
    .el-input{
      width:auto;
      input{
        padding:0 5px;
      }
    }
  }
  .search-btn{
    margin-left:20px;
  }
}
.service-table{
  width:100%;
}
.service {
  .el-table{
    th{
      background: $table-head-background-color;
      text-align: center;
      > .cell{
        padding:0;
        .el-checkbox{
          margin-right:0;
        }
      }
      &.name-content.is-leaf .cell{
        text-align:left;
        padding-left:20px;
      }
    }
    th,td{
      height:auto;
      padding:15px 0;
    }
    .handle-time .cell{
      padding:0 10px;
    }
  }
  .el-table-column--selection .cell{
    padding:0;
    text-align:center;
    .el-checkbox{
      margin-right:0;
    }
  }
  .handle-button{
    padding-left: 20px;
    margin-bottom: 10px;
    height:27px;
    .el-button--text{
      color: $font-blue-color;
      &.gray{
        color: #ccc;
      }
      &.green{
        color: $font-blue-color;
      }
    }
  }
}
</style>
